<template>
    <div style="height: 875px">
      <Header :position="positionTitle"></Header>
      <div style="display: flex;width:100%">
        <div style="width: 30%;margin-right: 10px;display: flex;flex-flow: column;height: 875px">
          <el-card style="margin-bottom: 10px;height: 50%">
            <div slot="header"
                 style="font-size: 20px;font-weight: bolder;text-align: left">
              <span>指标数量统计</span></div>
            <div style="display: flex; width: 100%; text-align: left">
              <div style="width: 200px; padding: 20px; margin-left: 50px">
                <h3>指标数</h3>
                <h1 style="color: #5470c6;font-size: 100px;">{{evaluationNum}}</h1>
              </div>
              <div style="width: 200px; padding: 20px">
                <h3>指标类型</h3>
                <h1 style="color: #91cc75;font-size: 100px;">{{evaluationType}}</h1>
              </div>
            </div>
          </el-card>
          <el-card style="margin-bottom: 10px;height: 50%">
            <div slot="header"
                 style="font-size: 20px;font-weight: bolder;text-align: left">
              <span>指标数曲线</span></div>
            <div id="lineChart" style="width: 100%;height: 200px"></div>
          </el-card>
          <el-card style="height: 50%">
            <div slot="header"
                 style="font-size: 20px;font-weight: bolder;text-align: left">
              <span>指标类型</span></div>
            <div id="AnnualPie" style="width: 100%;height: 170px;"></div>
          </el-card>
        </div>
        <div style="width: 70%">
          <el-card style="">
            <div slot="header"
                 style="font-size: 20px;font-weight: bolder;text-align: left">
              <span>指标数据详情</span></div>
            <div style="display: flex;margin-bottom: 20px">
              <div style="white-space: nowrap">类型：
                <el-select v-model="typeSelect"  placeholder="请选择" size="mini">
                  <el-option v-for="item in typeSelectData" :key="item"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="white-space: nowrap;margin-left: 20px">
                型号：
                <el-select v-model="modelSelect"  placeholder="请选择" size="mini">
                  <el-option v-for="item in modelSelectData" :key="item"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="white-space: nowrap;margin-left: 20px">编号：
                <el-select v-model="serialSelect" placeholder="请选择" size="mini">
                  <el-option v-for="item in serialSelectData" :key="item"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-button class="el-icon-search" size="mini" type="primary" @click="searchData">搜索</el-button>
              </div>
            </div>
            <div style="width: 100%">
              <el-table :data="dataList" stripe
                        height="680"
                        style="width: 100%">
                <el-table-column label="名称" prop="name">
                  <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.name}}</span>
                    <div v-show="slot.row.editable">
                      <el-input size="mini" v-model="slot.row.name"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="类型" prop="type">
                  <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.type}}</span>
                    <div v-show="slot.row.editable">
                      <el-input size="mini" v-model="slot.row.type"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="阈值" prop="thresholdValue">
                  <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.thresholdValue}}</span>
                    <div v-show="slot.row.editable">
                      <el-input size="mini" v-model="slot.row.thresholdValue"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="时间" prop="time">
                  <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.time}}</span>
                    <div v-show="slot.row.editable">
                      <el-input size="mini" v-model="slot.row.time"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit">
                  <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.unit}}</span>
                    <div v-show="slot.row.editable">
                      <el-input size="mini" v-model="slot.row.unit"></el-input>
                    </div>

                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="slot">
<!--                  <template>-->
                    <div>
                      <el-button size="mini" type="danger">删除</el-button>
                      <el-button size="mini" type="primary" @click="updateItem(slot.row)"  v-show="!slot.row.editable">修改</el-button>
                      <el-button size="mini" type="primary" @click="updateItem(slot.row)"  v-show="slot.row.editable">保存</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="20"
                  style="display: inline-block"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <el-dialog
              title="提示"
              :visible.sync="updateVisible"
              width="500px"
              >
        <div>
          <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
            <div class="filelabel row-left" style="width: 100px"><p>名称</p></div>
            <div class="titleinput row-right">
              <el-input  placeholder="请输入名称" v-model="updateItemInfo.name" ></el-input>
            </div>
          </div>

          <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
          <div class="filelabel row-left"  style="width: 100px"><p>类型</p></div>
          <div class="titleinput row-right">
            <el-input  placeholder="请输入类型" v-model="updateItemInfo.type"></el-input>
          </div>
        </div>

          <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
            <div class="filelabel row-left"  style=" width: 100px"><p>阈值</p></div>
            <div class="titleinput row-right">
              <el-input  placeholder="请输入阈值" v-model="updateItemInfo.thresholdValue"></el-input>
            </div>
          </div>

          <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
            <div class="filelabel row-left"  style="width: 100px"><p>单位</p></div>
            <div class="titleinput row-right">
              <el-input  placeholder="请输入单位" v-model="updateItemInfo.unit"></el-input>
            </div>
          </div>


        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="updateVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
  // import AnnualPie from "../charts/AnnualPie";
  import * as echarts from 'echarts'
  import Header from "../Header";
  export default {
    name: 'EvaluationIndexCard',
    components:{
      // AnnualPie
      Header
    },
    data(){
      return{
        evaluationNum:20,
        evaluationType:80,
        modelSelect:'',
        modelSelectData:[{name:'生成模型',value:1},{name:'预测模型',value:2},{name:'随机数模型',value:3},{name:'随机森林模型',value:4}],
        typeSelect:'',
        typeSelectData:[{name:'故障预警',value:1},],
        serialSelect:'',
        serialSelectData:[{name:'001',value:1},{name:'002',value:2},{name:'003',value:3},],
        dataList:[{
          name:'故障预警',type:'预警方法',thresholdValue:'30.61',time:'2020-11-07',unit:'无',editable:false,
        },{
          name:'故障预警',type:'处理方法',thresholdValue:'102.21',time:'2020-11-08',unit:'无',editable:false,
        },{
          name:'故障预警',type:' 处理方法',thresholdValue:'98.3',time:'2020-11-09',unit:'无',editable:false,
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'45.6',time:'2020-11-10',unit:'无',editable:false,
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'45.6',time:'2020-11-11',unit:'无',editable:false,
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'66.7',time:'2020-11-12',unit:'无',editable:false,
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'29.3',time:'2020-11-13',unit:'无',editable:false,
        },{
          name:'故障预警',type:'处理方法',thresholdValue:'108.1',time:'2020-11-14',unit:'无',editable:false,
        },],
        color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        positionTitle:{
          secondTitle:'操作管理' ,
          thirdTitle:'评估指标管理',
          routeString:'/Management/EvaluationIndex'
        },
        updateVisible:false,
        updateItemInfo:{},
        lineChartData:{
          xData:['18:53', '18:54', '18:55', '18:56', '18:57', '18:58', '18:59'],
          value1:[150, 230, 224, 218, 135, 147, 260],
        },
        AnnualPieData:{
          xData:[],
          value1:335,
          value2:310,
          value3:234
        }
      }
   },
    mounted () {
        this.drawLineChart()
        this.drawAnnualPie()
    },
    methods:{
      updateItem(item){
        if(!item.editable)
          item.editable=true
        else
          item.editable=false
              // this.updateItemInfo=item
              // this.updateVisible=true
      },
      drawLineChart(){
        let op1 = {
          xAxis: {
            type: 'category',
            data: this.lineChartData.xData,
            name: "时", //坐标名字
            nameLocation: "end",//坐标位置，支持start,end，middle
            nameTextStyle: {//字体样
              padding: -10 //距离坐标位置的距离
            }
          },
          grid:{
            x:30,
            y:30,
            y2:30,
            x2:30,
          },
          yAxis: {
            type: 'value',
            name: "指标数", //坐标名字
            nameLocation: "end",//坐标位置，支持start,end，middle
            nameTextStyle: {//字体样式


              padding: -10 //距离坐标位置的距离

            }
          },
          series: [{
            data: this.lineChartData.value1,
            type: 'line'
          }]
        };
        let myChart = echarts.init(document.getElementById('lineChart'));
        myChart.setOption(op1);
      },
      drawAnnualPie(){
        let option = {
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient : 'vertical',
            x : 'left',
            data:['类型一','类型二','类型三']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                  funnel: {
                    x: '25%',
                    width: '50%',
                    funnelAlign: 'left',
                    max: 1548
                  }
                }
              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series : [
            {
              name:'访问来源',
              type:'pie',
              radius : '80%',
              center: ['50%', '60%'],
              data:[
                {value:this.AnnualPieData.value1, name:'类型一'},
                {value:this.AnnualPieData.value2, name:'类型二'},
                {value:this.AnnualPieData.value3, name:'类型三'},
              ]
            }
          ],
        };
        let myChart = echarts.init(document.getElementById('AnnualPie'));
        myChart.setOption(option);
      },
    }

  }
</script>

<style scoped>
  .display-row {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: flex-start; /* Safari 6.1+ */
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }
  .row-left {
    font-size: 20px;
    width: 6%;
    font-weight: bold;

  }

  .row-right{
    width: 50%;
  }

  .titleClass {
    color: gray;
  }

  .row {
    display: flex;
    align-items: center;
    justify-content: center
  }

  .row-margin {
    margin-top: 20px;
  }

  .text {
    font-weight: bold;
    width: 30%;
    text-align: right;
  }

</style>
